import React from 'react';
import { Card, Typography, Divider, Row, Col, List } from 'antd';
import { AreaChartOutlined, GatewayOutlined, FileTextOutlined, CodeOutlined } from '@ant-design/icons';
import PageLayout from '../components/PageLayout';

const { Title, Paragraph, Text } = Typography;

const IntroductionPage: React.FC = () => {
  const umaData = [
    {
      icon: <AreaChartOutlined style={{ fontSize: '24px', color: '#1890ff' }} />,
      title: '核心职责：聚合指标分析',
      description: 'UMA的核心职责是收集关于浏览器整体使用情况的聚合、匿名的统计数据。它不与具体URL关联，主要用于衡量性能、功能使用频率和内存使用情况。',
    },
    {
      icon: <FileTextOutlined style={{ fontSize: '24px', color: '#52c41a' }} />,
      title: '数据形式：直方图（Histograms）',
      description: 'UMA数据通常以直方图的形式存在，用于记录数值的分布情况，例如页面加载时间、内存占用大小等。这使得开发人员可以了解指标的整体分布，而不仅仅是平均值。',
    },
    {
      icon: <CodeOutlined style={{ fontSize: '24px', color: '#faad14' }} />,
      title: '代码实现',
      description: '在Chromium代码中，UMA通常通过UMA_HISTOGRAM_...系列宏进行记录，并集中定义在`tools/metrics/histograms/histograms.xml`等文件中。',
    },
  ];

  const ukmData = [
    {
      icon: <GatewayOutlined style={{ fontSize: '24px', color: '#1890ff' }} />,
      title: '核心职责：URL关联的精细化分析',
      description: 'UKM（URL-Keyed Metrics）旨在收集与特定URL相关的精细化指标。它通过一个唯一的ID将用户在单个页面上的多个行为和事件关联起来，但该ID在不同网站、不同用户之间是独立的，以保护隐私。',
    },
    {
      icon: <FileTextOutlined style={{ fontSize: '24px', color: '#52c41a' }} />,
      title: '数据形式：事件（Events）和指标（Metrics）',
      description: 'UKM围绕“事件”构建，每个事件可以包含多个“指标”。例如，一个“PageLoad”事件可以包含页面加载时间、网络请求数、CPU时间等多个指标。',
    },
    {
      icon: <CodeOutlined style={{ fontSize: '24px', color: '#faad14' }} />,
      title: '代码实现',
      description: 'UKM在代码中通常使用`ukm::builders`和`UkmRecorder`等接口进行记录，其定义分散在`tools/metrics/ukm/`目录下的各个XML文件中。',
    },
  ];

  return (
    <PageLayout title="UMA & UKM 介绍">
      <div style={{ padding: '24px', background: '#fff' }}>
        <Title level={2} style={{ textAlign: 'center', marginBottom: '32px' }}>
          Chromium 遥测技术：UMA vs. UKM
        </Title>
        <Paragraph style={{ textAlign: 'center', fontSize: '16px', maxWidth: '800px', margin: '0 auto 48px' }}>
          UMA（User Metrics Analysis）和 UKM（URL-Keyed Metrics）是Chromium项目用于收集浏览器遥测数据的两大核心技术。
          它们共同帮助开发人员了解浏览器在真实世界中的性能和使用情况，但它们的设计哲学和用途有本质区别。
        </Paragraph>

        <Row gutter={[32, 32]}>
          <Col xs={24} lg={12}>
            <Card title={<Title level={3}>UMA - 用户指标分析</Title>} bordered={false} style={{ height: '100%', background: '#f0f5ff', borderRadius: '8px' }}>
              <List
                itemLayout="horizontal"
                dataSource={umaData}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={item.icon}
                      title={<Text strong>{item.title}</Text>}
                      description={<Paragraph type="secondary">{item.description}</Paragraph>}
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>

          <Col xs={24} lg={12}>
            <Card title={<Title level={3}>UKM - URL键控指标</Title>} bordered={false} style={{ height: '100%', background: '#f6ffed', borderRadius: '8px' }}>
              <List
                itemLayout="horizontal"
                dataSource={ukmData}
                renderItem={item => (
                  <List.Item>
                    <List.Item.Meta
                      avatar={item.icon}
                      title={<Text strong>{item.title}</Text>}
                      description={<Paragraph type="secondary">{item.description}</Paragraph>}
                    />
                  </List.Item>
                )}
              />
            </Card>
          </Col>
        </Row>

        <Divider />

        <Title level={4} style={{ marginTop: '32px' }}>总结对比</Title>
        <Paragraph>
          简单来说，<Text strong>UMA</Text> 关注的是“浏览器在做什么？”，它从宏观角度聚合数据，例如“所有页面加载时间的分布是怎样的？”。
          而 <Text strong>UKM</Text> 关注的是“用户在访问某个网页时发生了什么？”，它从微观角度关联同一页面上的多个指标，例如“访问 `example.com` 这个网页时，它的加载时间、CPU使用和网络错误分别是多少？”。
        </Paragraph>
        <Paragraph>
          在 <Text strong>UmaInsight</Text> 平台中，我们的目标是分析和管理这些遥测点，以确定哪些数据对我们有价值，需要进行收集，并将其分配给相应的责任团队进行持续监控和分析。
        </Paragraph>
      </div>
    </PageLayout>
  );
};

export default IntroductionPage;
